<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>常用联系人</title>
    <link rel="stylesheet" href="../../../css/aui.css" />
    <link rel="stylesheet" href="../../../css/my/sort.css" />
    <link rel="stylesheet" href="../../../css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="../../../css/my/frequenter/index.css" />
</head>

<body>
    <div class="aui-content content-padded contact_search" style="position:fixed;width:100%;background:#f7f7f7;z-index:999;">
        <div class="search">
            <i class="aui-iconfont aui-icon-search" style="line-height: 2.3rem;"></i>
            <input class="" style="height: 2rem;" onchange="get_contact_list(this.value)" type="text" placeholder="搜索常用联系人">
        </div>
    </div>
    <div style="height:3rem;">1</div>
    <div id="letter">2</div>
    <div class="sort_box">3</div>
    <div class="initials" style="top:3rem;">
        <ul></ul>
    </div>
</body>
<script src="../../../script/aui/api.js"></script>
<script src="../../../script/extend/jquery-3.3.1.min.js"></script>
<script src="../../../script/extend/doT.min.js"></script>
<script src="../../../script/extend/jquery.charfirst.pinyin.js"></script>
<script src="../../../script/sort.js"></script>
<script src="../../../script/common.js"></script>
<script src="../../../script/config.js"></script>

<script type="text/template" charset="utf-8" id="contact_tpl">
    {{ for(let i=0;i<it.length;i++){ }}
    <div class="sort_list" onclick="select_contact({{=it[i].id}},'{{=it[i].contact_name}}','{{=it[i].contact_mobile}}')">
    <div class="num_logo">{{=it[i].contact_name.substring(0, 1)}}</div>
    <div class="num_name user_info gray-4">{{=it[i].contact_name}}</div>
    <div class="user_info gray-8">{{=it[i].contact_mobile}}</div>
    </div>
    {{ } }}
</script>

<script type="text/javascript">
    apiready = function() {
        api.parseTapmode();
        get_contact_list('');//获取常用联系人列表
        api.addEventListener({
            name: 'addContactEvt'
        }, function(ret){
            setTimeout(function(){location.reload();},300);
        });
    };

    //搜索常用联系人
    function get_contact_list(search) {
        console.log(search);
        $('.sort_box').eq(0).html('');
        let param = {};
        param.url = Config.common.getContact;
        param.data = {
            search: search
        };
        ajax(param, function(ret) {
            console.log($api.jsonToStr(ret));
            if (ret.code === 1) {
                let tpl = document.getElementById("contact_tpl").innerHTML;
                document.getElementsByClassName('sort_box')[0].innerHTML = doT.template(tpl)(ret.data);
                sort();
            }
        });
    }

    //选中常用联系人
    function select_contact(id, name, mobile) {
        let consignee_info = {
            contact_id: id,
            contact_name: name,
            contact_mobile: mobile
        };
        api.sendEvent({
            name: 'contactUser',
            extra: {
              contact_id: id,
              contact_name: name,
              contact_mobile: mobile
            }
        });
        api.closeWin({});
    }
</script>
</html>
